<template>
  <div class="sidebar-container">
    <div class="sidebar-content">
      <!-- Logo和平台名称 -->
      <div class="logo-container">
        <div class="logo-wrapper">
          <img src="@/assets/logo.svg" alt="Logo" class="logo" />
        </div>
        <span class="platform-name">数据标注平台</span>
      </div>

      <!-- 菜单内容 -->
      <el-menu
        :default-active="activeIndex"
        class="sidebar-menu"
      >
        <!-- 菜单项 -->
        <el-menu-item index="1">
          <el-icon><House /></el-icon>
          <span>首页</span>
        </el-menu-item>

        <el-sub-menu index="2">
          <template #title>
            <el-icon><DataLine /></el-icon>
            <span>数据审核</span>
          </template>
          <el-menu-item index="2-1" @click="$router.push('/data')">所有数据</el-menu-item>
          <el-menu-item index="2-2" @click="$router.push('/FileTable')">文档列表</el-menu-item>
        </el-sub-menu>

        <el-menu-item index="3">
          <el-icon><Setting /></el-icon>
          <span>系统设置</span>
        </el-menu-item>
        <el-menu-item index="4" @click="$router.push('/home')">
          <el-icon><EditPen /></el-icon>
          <span>数据标注流程</span>
        </el-menu-item>


      </el-menu>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { 
  House, 
  Setting, 
  DataLine,
  EditPen
} from '@element-plus/icons-vue'

const activeIndex = ref('1')

// 添加组件名称
defineOptions({
  name: 'LeftSideBarNav'
})
</script>

<style scoped>
.sidebar-container {
  height: 100vh;
  background-color: #fff;
  width: 240px;
  border-right: 1px solid #e6e6e6;
}

.sidebar-content {
  display: flex;
  flex-direction: column;
}

.logo-container {
  height: 60px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #e6e6e6;
}

.logo-wrapper {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo {
  width: 32px;
  height: auto;
}

.platform-name {
  font-size: 16px;
  font-weight: bold;
}

:deep(.el-menu) {
  border-right: none;
}
</style> 